import { Icon } from "antd";
import React, { Component } from "react";
import "./index.css";
class Silder extends Component {
  index = 0;
  IdList = [];
  constructor(props) {
    super(props);
    this.IdList = this.props.IdList;
  }
  slideDown = () => {
    const windowH = window.innerHeight;
    const scrollY = window.scrollY;
    const index = Math.floor(scrollY / windowH);
    const Id = this.IdList[index + 1];
    if (!Id) {
      return;
    }
    this.Silde(Id)
  };
  slideUp = () => {
    const windowH = window.innerHeight;
    const scrollY = window.scrollY;
    const index = Math.ceil(scrollY / windowH);
    const Id = this.IdList[index - 2];
    if (!Id) {
      return;
    }
    this.Silde(Id)
  };
  Silde= (id) => {
    const element = document.getElementById(id);
    if(!element){return}
    const rect = element.getBoundingClientRect();  
    if(rect.top){
      window.scrollTo({
        top: rect.top + window.scrollY-70,
        behavior: "smooth"
      });
    }   
  };
  render() {
    return (
      <div className="slide-layout">
        <Icon onClick={this.slideUp} className="slide-icon" type="caret-up" />
        <Icon
          onClick={this.slideDown}
          className="slide-icon"
          type="caret-down"
        />
      </div>
    );
  }
}
export default Silder;
